<template>
	<div class="bg-white">
		<div>
			<Form ref="flowForm" :label-width="80">
				<FormItem class="" label="流程名字">
					<Input v-model="flow.name" placeholder="请输入流程名字"></Input>
				</FormItem>
				<FormItem class="" label="发起人">
					<Input v-model="job.name" disabled></Input>
				</FormItem>

				<div class="shadow radius">
					<div class="p-2 border-bottom d-flex justify-content-between">
						<div class="mt-1">
							<span>步骤信息</span>
						</div>
						<div>
							<Button v-if="steps.length" type="primary" class="mr-2" @click="deleteStep()">清除</Button>
							<Button v-if="showFlag" type="error" class="mr-2" @click="addStep()">添加步骤</Button>
						</div>
					</div>

					<div v-for="(step,index) in steps" v-model="steps">
						<div class="d-flex align-items-center p-2">
							<div class="m-1">
								<span class="text-muted">{{index + 1 }}</span>
							</div>
							<Input v-model="step.name" placeholder="请输入流程步骤名称" class="m-1"></Input>
							<Select class="" placeholder="请选择审批人职位" v-model="step.jobId" disabled>
								<Option v-for="job in jobs" :value="job.jobId" :key="job.jobId">
									{{ job.name }}
								</Option>
							</Select>
						</div>
					</div>
				</div>

				<FormItem class="text-right mt-2">
					<Button @click="submit()" type="primary">提交</Button>
				</FormItem>
			</Form>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				flow: {
					flowId:'',
					name: '',
					levels: '',
					jobId: '',
					deptId: '',
				},
				job:{
					name: ''
				} ,
				preJobId: '',
				jobMapping: [],
				steps: [],
				jobs: [],
				showFlag: false,
			}
		},
		props: {
			params: {
				type: Object,
				default: undefined,
			}
		},
		methods: {
			init: function() {
				this.getFlowDetail();
				this.search();
			},
			
			getFlowDetail: function() {
				this.http.get({
					url: "/dept/flow/info",
					param: {
						flowId: this.flow.flowId
					}
				}).then(data => {
					this.steps = data.steps;
				});
			},

			search: function() {
				this.http.get({
					url: "/dept/job/all",
					param: {
						deptId: this.flow.deptId
					}
				}).then(data => {
					this.jobs = data;
				});
			},
			
			deleteStep: function(index) {
				this.steps = [];
				this.showFlag = true;
			},
			
			addStep: function() {
				this.getJobMapping();
				if (this.steps.length == 0) {
					this.steps.push({
						name: "",
						jobId: this.flow.jobId,
						level: this.steps.length + 1,
					})
					this.flow.levels = this.steps.length;
					if (this.jobMapping.length + 1 <= this.flow.levels) {
						this.showFlag = false;
					}
					
				} else {
					this.steps.push({
						name: "",
						jobId: this.jobMapping[this.steps.length - 1].jobId,
						level: this.steps.length + 1,
					})
					this.flow.levels = this.steps.length;
					if (this.jobMapping.length + 1 <= this.flow.levels) {
						this.showFlag = false;
					}
				}
			},
			
			getJobMapping : function() {
				for (let i in this.jobs) {
					this.jobMapping = [];
					if (this.flow.jobId == this.jobs[i].jobId) {
						this.preJobId = this.jobs[i].pJobId;
						
						for (let j =0;j<this.jobs.length;j++) {
							if (this.preJobId == this.jobs[j].jobId && this.preJobId != 0 && this.preJobId != "0" &&
								this.preJobId != null) {
									this.jobMapping.push(this.jobs[j]);
									this.preJobId = this.jobs[j].pJobId;
									j = -1;
							}
						}
						return;
					}
				}
			},
			
			submit: function() {
				if(this.flow.name == '' || this.flow.name.length === 0){
					this.message.error("流程名字必须输入！");
					return;
				}
				if (this.steps.length <= 0) {
					this.message.error("步骤必须添加");
					return;
				}
				for (var index = 0; index < this.steps.length; index++) {
					if (this.steps[index].name === '') {
						this.message.error("流程步骤名称必须输入");
						return;
					}
					if (this.steps[index].jobId === '') {
						this.message.error("审批角色必须输入");
						return;
					}
				}
				for (var index = 0; index < this.steps.length; index++) {
					if(this.steps[index].name == ''){
						this.message.error("流程步骤名字必须输入！");
						return;
					}
				}
				
				this.http.put({
					url: "/dept/flow/info",
					param: {
						flow: JSON.stringify(this.flow),
						steps: JSON.stringify(this.steps)
					}
				}).then(data => {
					this.message.info("修改成功");
					this.$router.detail.close();
				});
			},
		},
		
		created: function() {
			this.flow = JSON.parse(this.params.flow);	
			this.job.name = this.flow.jobName;
			this.init();
		}
	}
</script>

<style>
</style>
